为了账号安全,请及时绑定邮箱和手机立即绑定

require.js 基础......

标签:
JavaScript

图片描述

main.js

require.config({
    paths: {
        /*这个好像 var list = require("jquery")*/
        jquery:'../../package/jquery',
        /*这个好像 var list = require("list")*/
        list:'./list',
        plume:'./plume'
    }
});

/*这个好像 调用list.methods*/
require(['jquery','list','plume'],function (jquery, list, plume) {
    $(function () {
        list.getInit();
        plume.main($(".plume-top"),"./assets/data/News/side/plume.json");
    })
});

plume.js

define(function (require,exports) {
    function init($el,$link) {
        var str='';
        $.ajax({
            url:$link,
            type:"get",
            success:function (data) {
                $.each(data,function (item,i) {
                    str+=
                        '<li>' +
                            '<div class="numbers">'+parseInt(item+1)+'</div>' +
                            '<a href="'+i.url+'">'+i.title+'</a>' +
                        '</li>'
                });
                $el.find("ul").append(str);
            }
        })
    }
    exports.main=init;
})

list.js

define(function(require, exports){
    function initList() {
        var $list=$(".temp-loader");
        var num=1;
        scroll($list,num);
        loadData($list,1)
    }
    function scroll($list,num) {
        /*监听滚动条事件*/
        $(window).on('scroll', function () {
            /*判断滚动到屏幕底部,然后进行动态加载*/
            len=num;
            if ($(window).scrollTop() >= $(document).height() - $(window).height()) {
                if (++num <= 6) {
                    loadData($list, num);
                } else if(num>=6) {
                    console.log(6)
                    //console.log('no data !!!' + $list.find('li').length);
                }
            }
        })
    }

    function loadData($ele, num) {
        $('.loading-panel').removeClass('hide');
        $.ajax({
            url: "./assets/data/News/list/newslist"+num+'.json',
            type:"get",
            success:function (data) {
                var str='';
                $.each(data,function (i,item) {
                    console.log(item)

                    str+=[
                        '<div class="news-temp-item">',
                        '<div class="head">',
                        '<a href="'+item.url+'" class="title">',
                        '<span>'+item.title+'</span>',
                        '</a>',
                        '<a href="'+item.url+'" class="img">',
                        '<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="'+item.img+'" alt="">',
                        '</a>',
                        '<p>'+item.content+'</p>',
                        '</div>',
                        '<div class="item-info news-info">',
                        '<div class="times">',
                        '<span class="time1">'+item.year+'</span>',
                        '<span class="time2">'+item.month+'</span>',
                        '<span class="time3">'+item.day+'</span>',
                        '</div>',
                        '<span class="add-height  watch add-left">'+item.watch+'</span>',
                        '<span class="add-height  thump add-left">'+item.zan+'</span>',
                        '</div>',
                        '</div>'
                    ].join('');
                    console.log(str)
                });
                $ele.append(str);
                setTimeout(function () {
                    $('.loading-panel').addClass('hide');
                }, 500)
            }
        })
    }
    exports.getInit=initList;
})

index.html

</html>
<script  class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./assets/js/package/require.js" data-main="./assets/js/common/news/main"></script>
点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
37
获赞与收藏
165

关注作者,订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消